<script lang="ts" setup>
  import { ref } from 'vue';
  import Steps from '@sscd/steps';
  const current = ref<number>(0);
  const stepStyle = { marginBottom: '60px', boxShadow: '0px -1px 0 0 #e8e8e8 inset' };
</script>

<template>
  <div class="demo">
    <div class="demo-title">导航步骤</div>
    <div class="demo-content">
      <Steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
        <Steps.Step
          title="Step 1"
          sub-title="00:00:05"
          status="finish"
          description="This is a description."
        />
        <Steps.Step
          title="Step 2"
          sub-title="00:01:02"
          status="process"
          description="This is a description."
        />
        <Steps.Step
          title="Step 3"
          sub-title="waiting for longlong time"
          status="wait"
          description="This is a description."
        />
      </Steps>
      <Steps v-model:current="current" type="navigation" :style="stepStyle">
        <Steps.Step status="finish" title="Step 1" />
        <Steps.Step status="process" title="Step 2" />
        <Steps.Step status="wait" title="Step 3" />
        <Steps.Step status="wait" title="Step 4" />
      </Steps>
      <Steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
        <Steps.Step status="finish" title="finish 1" />
        <Steps.Step status="finish" title="finish 2" />
        <Steps.Step status="process" title="current process" />
        <Steps.Step status="wait" title="wait" disabled />
      </Steps>
    </div>
  </div>
</template>
